<template>
  <div v-if="models">
    <el-select placeholder="请选择" v-model="reData.lableOne" :disabled="ModeIsDisabled" style="width: 170px;">
      <el-option v-for="item in ModeData" :key="item.value" :value="item.value" @click="selete1(item)">
        <template #default>
          {{ item.label }} <i style="color:red">{{ item.vereist ? '*' : '' }}</i>
        </template>
      </el-option>
    </el-select>
    &emsp;
    <el-select placeholder="请选择" v-model="reData.lableTow" :disabled="ModeIsDisabled" style="width: 180px;">
      <el-option v-for="item in IdentityTraits" :key="item.value" :value="item.value" v-show="!item.IsDisabled"
        @click="selete2(item)">
        <template #default>
          {{ item.label }} <i style="color:red">{{ item.vereist ? '*' : '' }}</i>
        </template>
      </el-option>
      <el-option disabled value="-1" label="已无信息"></el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onDeactivated } from "vue"
defineProps({
  ModeData: {
    type: Object,
    default: [{
      value: "",
      label: ""
    }]
  },
  ModeIsDisabled: {
    type: Boolean,
    default: 0
  }
})
const models = ref(true)
const emit = defineEmits(['update:modelValue'])
const IdentityTraits = ref<any>([]);
const reData = ref<any>({
  lableOne: {
    value: "",
    label: ""
  },
  lableTow: {
    value: "",
    label: ""
  }
})

function selete1(row: any) {
  // console.log("selete1: row: ", row)
  reData.value.lableOne = {
    label: row.label,
    value: row.value,
    children: row.children
  }
  reData.value.lableTow = "";
  IdentityTraits.value = row.children;
}

function selete2(row: any) {
  // console.log("selete2: row: ", row)
  reData.value.lableTow = {
    label: row.label,
    value: row.value,
    vereist: row.vereist,
    children: row.children,
    creditInfoItemId: row.creditInfoItemId
  }
}
watch(reData, (newval) => {
  if (newval.lableTow) {
    emit('update:modelValue', newval)
  } else {
    emit('update:modelValue', '')
  }
}, { deep: true })

onDeactivated(() => {
  models.value = false
})


</script>
